<template>
    <div class="page-container">
      <div class="page-row">
      </div>
      <el-row style="margin: 10px 0" justify="space-between">
          <el-row>
              <!-- <el-button size="small" type="primary" @click="createOrder">新建订单</el-button> -->
              <!-- <el-button size="small" type="warning" @click="handleVerify">订单核销</el-button> -->
              <el-button size="small" type="default" plain @click="checkAll">订单结算</el-button>
              <el-row>
                  <el-date-picker
                      v-model="search.range"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      size="small"
                      style="margin-left:10px;"
                      value-format="YYYY-MM-DD"
                      @change="bindSearch"
                  />
              </el-row>
          </el-row>
          <!-- <el-row>
              <el-button size="small" type="warning" plain @click="openDraft">草稿箱</el-button>
              <el-button type="default" size="small" @click="setHeader">表头设置</el-button>
          </el-row> -->
      </el-row>
      <div class="table-box">
          <el-table :data="list" size="small" class="tableList" >
              <el-table-column type="selection" width="30" fixed="left"></el-table-column>
              <el-table-column v-for="item in header" :key="item.id" :prop="item.label" :min-width="item.name.length > 5 ? `130px` : `90px`" :align="item.label !== 'productName' ? 'center' : 'left'" :width="item.label !== 'productName' ? `unset` : '400px'" :class-name="item.label !== 'productName' ? '' : 'order-goods'">
                  <template #header>
                      <span v-if="item.label !== 'productName'" style="margin-right:2px;">{{item.name}}</span>
                      <el-row class="order-row-item order-border-none" v-else>
                          <el-col :span="6">产品名称</el-col>
                          <el-col :span="6">详情/规格</el-col>
                          <el-col :span="4">数量</el-col>
                          <el-col :span="4">单价(元)</el-col>
                          <el-col :span="4">折扣</el-col>
                      </el-row>
                      <!-- 可搜索表头 -->
                      <el-popover
                          placement="bottom"
                          :width="100"
                          trigger="click"
                          v-if="item.isFilter && item.filter == 'search'">
                          <template #reference>
                              <el-icon :size="15" color="var(--el-color-primary)"><ele-Search /></el-icon>
                          </template>
                          <el-input 
                              :placeholder="`请输入${item.name}`"
                              v-model.trim="search[item.label]"
                              size="small"
                              title="按下回车即可搜索"
                              clearable
                              @keydown.enter="bindSearch">
                          </el-input>
                      </el-popover>
                      <!-- 可筛选表头 -->
                      <el-popover
                          placement="bottom"
                          :width="60"
                          trigger="click"
                          @after-leave="bindSearch"
                          v-if="item.isFilter && item.filter == 'filter'">
                          <template #reference>
                              <el-icon :size="15" color="var(--el-color-primary)"><ele-Filter /></el-icon>
                          </template>
                          <el-scrollbar max-height="600px">
                              <el-radio-group v-model="search[item.label]" size="small" v-if="filterList[item.label].length > 0">
                                  <el-radio  v-for="radio in filterList[item.label]" :key="radio.name" :label="radio.id" @click.prevent="onRadioChange(radio.id, item.label)">{{radio.name}}</el-radio>
                              </el-radio-group>
                              <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据" />
                          </el-scrollbar>
                      </el-popover>
                  </template>
                  <template #default="scope">
                      <template v-if="item.label == 'productName'">
                          <div style="flex:1;display:flex;flex-direction: column;">
                              <div v-for="(order, index) in scope.row.orderItemList" :key="order.id" style="flex: 1;height:100%">
                                  <el-row class="order-row-item" style="height:100%">
                                      <el-col :span="6">{{order.skuName}}</el-col>
                                      <el-col :span="6">{{order.spuName}}</el-col>
                                      <el-col :span="4">{{order.skuQuantity}}</el-col>
                                      <el-col :span="4">{{order.skuPrice}}</el-col>
                                      <el-col :span="4">折扣</el-col>
                                  </el-row>
                                  <el-divider style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)" v-if="index < scope.row.orderItemList.length - 1" />
                              </div>
                          </div>
                      </template>
                      <template v-else-if="item.isFilter && item.filter == 'filter'">
                          {{getStatusText(item.label, scope.row[item.label])}}
                      </template>
                      <template v-else>{{scope.row[item.label]}}</template>
                  </template>
              </el-table-column>
              <el-table-column fixed="right" width="200px" label="操作">
                  <template #default="scope">
                      <!-- <el-button size="small" link type="primary" @click="approval(scope.row)">审批</el-button> -->
                      <el-button size="small" link type="primary" @click="logistic(scope.row)" >结算</el-button>
                      <el-button size="small" link type="primary" @click="showLevel(scope.row)" >查看下级</el-button>
                      <el-button size="small" link type="primary" @click="showOrders(scope.row)" >分佣订单</el-button>
                      <el-button size="small" link type="primary" @click="afterSale(scope.row)" v-if="scope.row.status == 3">售后</el-button>
                      <el-button size="small" link type="primary" @click="editOrder(scope.row)" v-if="scope.row.status == 0">编辑</el-button>
                      <el-button size="small" link type="primary" @click="getFund(scope.row)" v-if="scope.row.status != 5 && (scope.row.sourceType == 2 || scope.row.sourceType == 3)">回款</el-button>
                      <el-button size="small" link type="primary" @click="signOrder(scope.row)" v-if="scope.row.status == 2">确认签收</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="page-block">
          <el-pagination
              v-model:currentPage="current"
              v-model:page-size="size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="false"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
      </div>
      <!-- <order-detail v-model:dialogDrawer="dialogDetail" v-model:defaultForm="rowForm" @onDelete="detailDel"></order-detail>
      <create-order v-model:dialogDrawer="dialogCreate" :title="title" v-model:defaultForm="rowForm" v-model:isEdit="isEdit"></create-order>
      <header-setting v-model:dialogDrawer="dialogHeader" v-model:defaultHeader="header" @onSubmit="headerSubmit"></header-setting>
      <fund-detail v-model:dialogDrawer="dialogFund" :defaultForm="rowForm"></fund-detail>
      <cancel-order v-model:dialogDrawer="dialogCancel" v-model:defaultForm="rowForm" @onSubmit="cancelSubmit"></cancel-order>
      <after-sale-detail v-model:dialogDrawer="dialogAfterSale" v-model:defaultForm="rowForm"></after-sale-detail>
      <draft-list v-model:dialogDrawer="dialogDraft"></draft-list>
      <verification v-model:dialogDrawer="dialogVerify" @onSubmit="submitVerification"></verification> -->
      <!-- <logistic-detail v-model:dialogDrawer="dialogLogistic" v-model:defaultForm="rowForm" @onSubmit="logisticSubmit"></logistic-detail> -->
      
      <!-- 结算弹框 -->
      <el-drawer
        v-model="dialogLogistic" title="分佣结算" direction="rtl" size="80%" >
        <el-table height="90%" :data="orderList" ref="multipleTableRef" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="orderSn" label="订单号" />
          <el-table-column property="payIcon" label="客户头像" >
            <template #default="scope">
              <el-avatar  :src="scope.row.payIcon" />
            </template>
          </el-table-column>
          <el-table-column property="payName" label="客户昵称" width="200" />
          <el-table-column property="payAmount" label="购买金额" />
          <el-table-column property="saleMoney" label="分佣奖励" />
          <el-table-column property="type" label="佣金类型" >
            <template #default="scope">
              <el-tag class="ml-2" type="success">{{saleType[scope.row.type]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="status" label="状态" >
            <template #default="scope">
              <el-tag class="ml-2" :type="saleTag[scope.row.status]">{{saleStatus[scope.row.status]}}</el-tag>
            </template>
          </el-table-column>          
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
          <el-button class="mr-ls" >选择结算金额：<span style="color: red;">￥{{settleParam.settleMoney}}</span></el-button>
          <el-button type="primary" :disabled="settleParam.orderIds.length == 0" @click="showSubmit()">结 算</el-button>
        </div>
        <el-drawer v-model="innerDrawer" size="50%" title="结算操作" :append-to-body="true">
          <div class="settle-box">
            <el-avatar shape="square" :src="settleUser.header" style="width: 100px; height: 100px;" />
            <div class="user-info">
              <div>昵称：{{settleUser.username}}</div>
              <div style="margin: 20px 0">手机号：{{settleUser.mobile}}</div>
              <div>本次结算金额：<span style="color: red;">￥{{settleParam.settleMoney}}</span></div>
            </div>            
          </div>
          <div class="uploadImage-box">
              <div>上传凭证：</div>
              <el-upload :file-list="settleParam.settleEvidence" ref="uploadBanner" :action="uploadUrl" :headers="headers"
								list-type="picture-card" :auto-upload="true" :multiple="false" :limit="1">
								<el-icon>
									<ele-Camera />
								</el-icon>
								<template #file="{ file }">
									<img class="el-upload-list__item-thumbnail" :src="file.url" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview"
											@click="handlePictureCardPreview(file)">
											<el-icon>
												<ele-ZoomIn />
											</el-icon>
										</span>
										<span class="el-upload-list__item-delete" @click="handleRemove(file)">
											<el-icon>
												<ele-Delete />
											</el-icon>
										</span>
									</span>
								</template>
							</el-upload>
            </div>
            <div class="submitParam">
              <el-button  type="primary" round @click="submitSettle()">确 认 结 算</el-button>
            </div>
        </el-drawer>
      </el-drawer>  
      <el-dialog v-model="dialogBannerVisible" title="图片预览">
        <img w-full :src="dialogImageUrl" alt="图片预览" style="display:block;margin: 0 auto;width:100%" />
      </el-dialog>  
      
      <!-- 查看下级弹框 -->
      <el-drawer v-model="levelStatus" title="下级列表" direction="rtl" size="80%" >
        <el-table height="90%" :data="levelList" ref="multipleTableRef">
          <el-table-column prop="header" label="头像" width="180" />
          <el-table-column prop="username" label="用户名" width="180" />
          <el-table-column prop="nickname" label="昵称" />
          <el-table-column prop="mobile" label="手机号" />          
          <el-table-column prop="returnMoney" label="退款分佣金额" />
          <el-table-column prop="stopMoney" label="冻结分佣金额" />
          <el-table-column prop="awaitMoney" label="待结算金额" />
          <el-table-column prop="accMoney" label="已结算金额" />
          <el-table-column prop="spreadTime" label="成为日期" />
          <el-table-column prop="agentLevel" label="分销商身份" >
            <template #default="scope">
              <el-tag class="ml-2" type="success">{{levelType[scope.row.agentLevel]}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>

      <!-- 查看所有订单 -->
      <el-drawer v-model="showOrderStatus" title="下级列表" direction="rtl" size="80%" >
        <el-table height="90%" :data="orderAllList" ref="multipleTableRef" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="orderSn" label="订单号" />
          <el-table-column property="payIcon" label="客户头像" >
            <template #default="scope">
              <el-avatar  :src="scope.row.payIcon" />
            </template>
          </el-table-column>
          <el-table-column property="payName" label="客户昵称" width="200" />
          <el-table-column property="payAmount" label="购买金额" />
          <el-table-column property="saleMoney" label="分佣奖励" />
          <el-table-column property="type" label="佣金类型" >
            <template #default="scope">
              <el-tag class="ml-2" type="success">{{saleType[scope.row.type]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="status" label="状态" >
            <template #default="scope">
              <el-tag class="ml-2" :type="saleTag[scope.row.status]">{{saleStatus[scope.row.status]}}</el-tag>
            </template>
          </el-table-column>          
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="orderSearch.current"
              v-model:page-size="orderSearch.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="orderSearch.total"
              :hide-on-single-page="false"
              @size-change="handleSizeChangeTwo"
              @current-change="handleCurrentChangeTwo"
          />
        </div>
      </el-drawer>

    </div>
  </template>
  
  <script>
  import { reactive, toRefs, onMounted, computed, h, ref  } from 'vue'
  import { UserFilled } from '@element-plus/icons-vue'
  import LogisticDetail from '../components/LogisticDetail.vue'

//   import OrderDetail from '../components/OrderDetail.vue'
//   import CreateOrder from '../components/CreateOrder.vue'
//   import HeaderSetting from '../components/HeaderSetting.vue'
//   import FundDetail from '../components/FundDetail.vue'
//   import CancelOrder from '../components/CancelOrder.vue'
//   import AfterSaleDetail from '../components/AfterSaleDetail.vue'
//   import DraftList from '../components/DraftList.vue'
//   import Verification from '../components/Verification.vue'
  import { ElMessage, ElMessageBox, ElTable } from 'element-plus'

  
  import { useSaleApi } from '/@/api/pms/sale/index'
  import { storeToRefs } from 'pinia';
  import { saleModelStatus } from '/@/stores/sale'
  import { Session } from '/@/utils/storage'
  export default {
      name: 'OrderIndex',
      components: { 
        //   OrderDetail, 
          LogisticDetail, 
        //   CreateOrder, 
        //   HeaderSetting, 
        //   FundDetail,
        //   CancelOrder,
        //   AfterSaleDetail,
        //   DraftList,
        //   Verification
      },
      setup() {
          const saleApi = useSaleApi()
          const storeSale = saleModelStatus() // 分销各类状态数据
          const uploadBanner = ref()
          const state = reactive({
              uploadUrl: '/api/file/filaAttach/upload', // 上传地址
              headers: {
                '17work': Session.get('token')
                },
              orderStatus: [{
                  name: '待审批',
                  id: 1,
                  label: 'stayApprove'
              },{
                  name: '已审批',
                  id: 2,
                  label: 'yetApprove'
              },{
                  name: '待付款',
                  id: 3,
                  label: 'awaitPay'
              },{
                  name: '待发货',
                  id: 4,
                  label: 'awaitDeliver'
              },{
                  name: '待收货',
                  id: 5,
                  label: 'deliverGoods'
              },{
                  name: '重发补发',
                  id: 6,
                  label: 'anewDeliver'
              },{
                  name: '执行完毕',
                  id: 7,
                  label: 'accessStatus'
              },{
                  name: '待退款',
                  id: 8,
                  label: 'returnMoney'
              },{
                  name: '退款完毕',
                  id: 9,
                  label: 'returnMoneyAss'
              },
               {
                  name: '订单取消',
                  id: -1,
                  label: 'cancelStatus'
              }],
              // 表头数据
              header: [{
                  name: '分销商头像',
                  isFilter: false,
                  filter: 'filter',
                  label: 'header'
              },{
                  name: '分销商用户名',
                  isFilter: true,
                  filter: 'search',
                  label: 'username'
              }
              ,{
                  name: '分销商昵称',
                  isFilter: true,
                  filter: 'search',
                  label: 'nickname'
              }
              ,{
                  name: '手机号码',
                  isFilter: true,
                  filter: 'search',
                  label: 'mobile'
              },
              {
                  name: '	推广用户数量',
                  isFilter: false,
                  filter: 'search',
                  label: 'shareUsers'
              },
              {
                  name: '订单数量',
                  isFilter: false,
                  filter: 'search',
                  label: 'orderAmount'
              },
              {
                  name: '订单金额',
                  isFilter: false,
                  filter: 'search',
                  label: 'amountMoney'
              }
              ,{
                  name: '上级头像',
                  isFilter: false,
                  filter: 'filter',
                  label: 'parentIcon'
              }
              ,{
                  name: '上级用户名',
                  isFilter: false,
                  filter: 'filter',
                  label: 'parentName'
              }
              ,{
                  name: '退款分佣金额',
                  isFilter: false,
                  filter: 'filter',
                  label: 'returnMoney'
              }
              ,{
                  name: '冻结分佣金额',
                  isFilter: false,
                  filter: 'filter',
                  label: 'stopMoney'
              }
              ,{
                  name: '待结算金额',
                  isFilter: false,
                  filter: 'filter',
                  label: 'awaitMoney'
              },{
                  name: '已结算金额',
                  isFilter: false,
                  filter: 'filter',
                  label: 'accMoney'
              },{
                  name: '成为日期',
                  isFilter: false,
                  filter: 'filter',
                  label: 'spreadTime'
              },{
                  name: '分销商身份',
                  isFilter: true,
                  filter: 'filter',
                  label: 'agentLevel'
              }],
              search: {
                  username: '',
                  nickname: '',
                  phone: '',
                  agentLevel: '',
              },
              accountData: {},
              list: [],
              orderList: [],
              orderAllList: [],
              orderSearch: {
                current: 1,
                size: 10,
                total: 0
              },
              filterList: storeToRefs(storeSale),
              dataAll: {},
              dataDay: {},
              totalAmount: 0,
              payAmount: 0,
              title: '新建订单', 
              current: 1, // 当前页
              size: 10, // 条数
              total: 0, // 总数
              rowForm: {}, // row表单
              isEdit: false, // 是否编辑
              dialogLogistic: false,
              dialogDetail: false, // 订单详情
              dialogCreate: false,
              dialogHeader: false,
              dialogFund: false, // 回款
              dialogCancel: false, // 取消订单
              dialogAfterSale: false, // 售后
              dialogDraft: false, // 草稿箱
              dialogVerify: false, // 核销
              innerDrawer: false, // 结算弹框
              settleUser: {}, // 结算的用户信息
              settleParam: {
                orderIds: [], // 结算的订单号
                saleId: '',   // 结算的用户
                settleMoney: 0.00,  // 结算金额
                settleEvidence: [], // 结算凭证
              },
              dialogImageUrl: '', // 图片预览
              dialogBannerVisible: false, 
              levelType: {
                0: '推销员',
                1: '一级分销商',
                2: '二级分销商'
              },
              // 分佣类型
              saleType: {
                1: '一级分佣',
                2: '二级分佣',
                3: '直销佣金(1+2)'
              },
              // 分佣状态
              saleStatus: {
                '-1': '已退款',
                '0': '冻结中',
                '1': '待结算',
                '2': '已结算'
              },
              // 状态颜色
              saleTag: {
                '-1': 'danger',
                '0': 'warning',
                '1': 'success',
                '2': 'info'
              },
              levelStatus: false, // 查看下级开关
              levelList: [], // 下级用户数据
              levelParam: {  // 查看下级查询
                current: 1,
                size: 10,
                spreadUid: '',
                startTime: '',
                endTime: ''
              },
              showOrderStatus: false, // 查看所有订单
          })
          // 点击查看结算弹框
          const showSubmit = () => {
            saleApi.getSetting({
                type: 1
            }).then(res => {
                if(res.data.minMoney >= state.settleParam.settleMoney){
                    state.innerDrawer = true
                }else{
                    ElMessage.error('最小提现金额为：' + res.data.minMoney)
                }
            })
          }
          // 订单结算
          const submitSettle = () => {
            saleApi.settleOrder({
              saleId: state.settleUser.id,
              ids: state.settleParam.orderIds,
              settleMoney: state.settleParam.settleMoney,
              settleImage: state.settleParam.settleEvidence.length > 0?state.settleParam.settleEvidence[0].response.data.src:''
            }).then(res => {
              ElMessage.success('签收成功')
              state.innerDrawer = false
              state.dialogLogistic = false
              state.settleParam = {
                orderIds: [], // 结算的订单号
                saleId: '',   // 结算的用户
                settleMoney: 0.00,  // 结算金额
                settleEvidence: [], // 结算凭证
              }
              getList()
            })
          }
          // 查看下级
          const showLevel = row => {
            state.levelParam.spreadUid = row.id
            saleApi.getList(state.levelParam).then(res => {
              state.levelList = res.data.records
              state.levelStatus = true
            })
            
          }
          // 查看所有订单
          const showOrders = row => {
            state.orderSearch = {
                current: 1,
                size: 10,
                saleId: row.id,
            }
            getSaleAllOrder()
            state.showOrderStatus = true
          }
          // 获取筛选的订单
          var handleSelectionChange = (val) => {
            console.log(val);
            state.settleParam.settleMoney = 0
            state.settleParam.orderIds = []
            for (let index = 0; index < val.length; index++) {
              state.settleParam.orderIds.push(val[index].id)
              state.settleParam.settleMoney += val[index].saleMoney
            }
          }
          // 获取订单状态
          const getStatusText = computed(() => {
              return (label, val) => {
                  const result = state.filterList[label].find(item => {
                      return item.id == String(val)
                  })
                  return result ? result.name : ''
              }
          })
          // 修改订单阶段生命周期
          const openLifeSetting = () => {
  
          }
          // 新建订单
          const createOrder = () => {
              state.dialogCreate = true
              state.title = '新建订单'
          }
          // 搜索
          const bindSearch = () => {
              state.current = 1
              getList()
          }
          // 审批
          const approval = row => {
              console.log(row)
          }
          // 条数修改
          const handleSizeChange = e => {
              state.size = e
              getList()
          }
          // 页码修改
          const handleCurrentChange = e => {
              state.current = e
              getList()
          }
          // 条数修改
          const handleSizeChangeTwo = e => {
              state.orderSearch.size = e
              getSaleAllOrder()
          }
          // 页码修改
          const handleCurrentChangeTwo = e => {
              state.orderSearch.current = e
              getSaleAllOrder()
          }
          // 结算
          const logistic = row => {
              state.rowForm = row
              state.settleUser = row
              state.orderSearch = {
                // current: 1,
                // size: 10,
                saleId: row.id,
                status: 1
              }
              getSaleOrder()
              state.dialogLogistic = true
          }
          // 取消订单
          const cancelOrder = row => {
              state.rowForm = row
              state.dialogCancel = true
          }
          // 售后
          const afterSale = row => {
              state.rowForm = row
              state.dialogAfterSale = true
          }
          // 编辑
          const editOrder = row => {
              state.rowForm = row
              state.isEdit = true
              state.dialogDetail = true
              state.title = '编辑订单'
          }
          // 查看详情
          const checkDetail = row => {
              state.rowForm = row
              state.dialogDetail = true
              state.isEdit = false
          }
          // 回款
          const getFund = row => {
              state.rowForm = row
              state.dialogFund = true
          }
          // 详情删除操作
          const detailDel = () => {
  
          }
          // 发货提交
          const logisticSubmit = () => {
  
          }
          // 获取所有订单
          const getSaleAllOrder = () => {
            saleApi.getSaleOrder(state.orderSearch).then(res => {
              state.orderAllList = res.data.records
              state.orderSearch.total = res.data.total
            })
          }
          // 获取分销订单
          const getSaleOrder = () => {
            saleApi.getSaleOrder(state.orderSearch).then(res => {
              state.orderList = res.data
            })
          }
          // 获取分销商
          const getList = () => {
              // 需要将同一个订单的商品合并行
              const search = JSON.parse(JSON.stringify(state.search))
              delete search.range
              for(let key in search) {
                  if(!search[key] && search[key] != '0') {
                      delete search[key]
                  }
              }
              saleApi.getList({
                  current: state.current,
                  size: state.size,
                  startTime: state.search.range ? state.search.range[0] : '',
                  endTime: state.search.range ? state.search.range[1] : '',
                  ...search
              }).then(res => {
                  state.total = res.data.total
                  state.list = res.data.records
                  state.totalAmount = res.data.orderAllMoney
              })
          }
          // 表头设置
          const setHeader = () => {
              state.dialogHeader = true
          }
          // 表头数据提交
          const headerSubmit = (e) => {
              console.log(e)
          }
          // 取消订单提交
          const cancelSubmit = () => {
              getList()
          }
          // 全部订单
          const checkAll = () => {
              state.search.range = ''
              state.current = 1
              getList()
          }
          // 切换单选框
          const onRadioChange = (val, type) => {
              if(state.search[type] == String(val)){
                  state.search[type] = ''
                  return
              }
              state.search[type] = val
          }
          // 统计金额数据
          const getSummaries = (params) => {
              const { columns, data } = params
              const sums = []
              const sumsProperty = ['totalAmount', 'payAmount']
              columns.forEach((column, index) => {
                  if (index === 0){
                      sums[index] = ''
                      return
                  }
                  if (column.property === 'orderSn') {
                      sums[index] = (() => {
                          return h('div', { style: {color: 'var(--el-color-primary)',fontWeight: 'bold'} }, [h('p', '∑ 本页'), h('p', '∑ 全部')])
                      })();
                      return
                  }
                  const values = data.map((item) => Number(item[column.property]))
                  // 合计应收金额, 订单总金额
                  if (sumsProperty.includes(column.property)) {
                      sums[index] = (() => {
                          return h('div', [
                              `￥${values.reduce((prev, curr) => {
                                  const value = Number(curr)
                                  if (!Number.isNaN(value)) {
                                      return prev + curr
                                  } else {
                                      return prev
                                  }
                              }, 0)}`, h('p', `￥${state.totalAmount}`)])
                      })()
                      
                  } else {
                      sums[index] = ''
                  }
              })
              return sums
          }
          // 确认收货
          const signOrder = row => {
              ElMessageBox.confirm(
                  `是否确定已收到${row.productName}`,
                  '提示',
                  {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                  }
              ).then(() => {
                  orderApi.signForOrder({
                      deliveryId: row.deliveryId || '',
                      orderId: row.id
                  }).then(() => {
                      ElMessage.success('签收成功')
                      getList()
                      getHeaderStatistics()
                  })
              })
          }
          // 草稿箱
          const openDraft = () => {
              state.dialogDraft = true
          }
          // 核销提交
          const submitVerification = () => {
  
          }
          // 核销订单
          const handleVerify = () => {
              state.dialogVerify = true
          }
          const handlePictureCardPreview = (file) => {
            state.dialogImageUrl = file.url
            state.dialogBannerVisible = true
          }
          const handleRemove = file => {
            uploadBanner.value.handleRemove(file)
          }
          onMounted(() => {
              getList()
          })
          return {
              ...toRefs(state),
              openLifeSetting,
              createOrder,
              bindSearch,
              approval,
              handleSizeChange,
              handleCurrentChange,
              handleSizeChangeTwo,
              handleCurrentChangeTwo,
              logistic,
              cancelOrder,
              afterSale,
              editOrder,
              checkDetail,
              getFund,
              detailDel,
              logisticSubmit,
              setHeader,
              headerSubmit,
              cancelSubmit,
              checkAll,
              onRadioChange,
              getStatusText,
              getSummaries,
              signOrder,
              openDraft,
              submitVerification,
              handleVerify,
              handleSelectionChange,
              handlePictureCardPreview,
              handleRemove,
              uploadBanner,
              submitSettle,
              showLevel,
              showOrders,
              showSubmit,
          }
      }
  }
  </script>
  
  <style scoped lang="scss">
  .page-container{
      padding: 5px 15px 15px !important;
      .page-row{
          display: flex;
          flex-wrap: wrap;
          align-items: stretch;
          .tips-data{
              display: flex;
              align-items: center;
              height: 28px;
              margin-top: 20px;
              .tips{
                  margin-right: 3px;
                  font-size: 13px;
              }
              &:first-child{
                  height: unset;
                  margin-top: 0;
              }
          }
          .tips-cell{
              flex: auto;
              .tips-item{
                  display: flex;
                  align-items: center;
                  padding-left: 10px;
                  justify-content: space-between;
              }
              .tips-name{
                  margin-right: 10px;
                  flex: 1;
                  overflow: hidden;
                  text-align: center;
              }
              .item-data{
                  text-align: center;
                  height: 28px;
                  margin-top: 20px;
                  line-height: 28px;
                  color: var(--el-menu-text-color);
                  font-size: 13px;
              }
              .item-right{
                  margin-right: 14px;
              }
              .red {
                  color: var(--el-color-danger)
              }
              .green{
                  color: var(--el-color-success);
              }
          }
          .col-cell{
              padding: 10px 20px 0;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              height: 100%;
              flex-wrap: wrap;
              .col-tips, .col-data{
                  text-align: center;
              }
              .col-data{
                  flex: auto;
                  line-height: 100%;
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                  font-size: 44px;
                  padding-top: 10px;
              }
          }
          .before{
              color: var(--el-color-danger);
          }
          .current{
              color: #626aef;
          }
      }
      .table-box{
          background: #fff;
          margin-top: 10px;
          :deep(.el-table__header-wrapper .el-table__cell) {
              background: var(--el-color-primary-light-9);
              color: var(--next-bg-menuBar-light-1);
          }
          .tableList{
              border: 1px solid var(--el-table-border-color);
              border-bottom: none;
              :deep(thead .cell) {
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }
              :deep(thead th:last-child .cell){
                  justify-content: center;
              }
              :deep(thead .el-icon) {
                  margin-top: -2px;
                  cursor: pointer;
              }
              .primary{
                  cursor: pointer;
                  color: var(--el-color-primary);
              }
              :deep(.el-button){
                  margin-left: 0;
                  margin-right: 12px;
              }
              :deep(.el-table__body td.el-table__cell) {
                  border-right: 1px solid var(--el-border-color-light);
                  padding: 0;
                  &:last-child{
                      border-right: none;
                  }
              }
              .order-row-item{
                  width: 100%;
                  :deep(.el-col){
                      border-right: 1px solid var(--el-border-color-light);
                      text-align: center;
                      display:flex;
                      align-items: center;
                      justify-content: center;
                      &:last-child{
                          border-right: none;
                      }
                      &:first-child,
                      &:nth-child(2){
                          text-align: left;
                          justify-content: flex-start;
                          padding-left: 8px;
                      }
                  }
              }
              .order-border-none{
                  :deep(.el-col){
                      border: none;
                  }
              }
          }
      }
  }
  
  :deep(.el-empty__description){
      margin-top: 5px;
      font-size: 11px;
  }
  </style>
  <style lang="scss">
  .order-goods .cell {
      padding: 0;
  }
  .el-table__body .order-goods .cell{
      min-height: 70px;
      display: flex;
      align-items: stretch;
      padding: 0;
  }

  .settle-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;

    .user-info{
      display: flex;
      flex-direction: column;
      margin-left: 30px;
    }
  }

  .uploadImage-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 60px;
  }

  .submitParam{
    display: flex;
    justify-content: center;
    margin-top: 80px;
  }
  </style>